<template>
    <div class="custom-title-box-border">
        <div class="custom-title-box">
            <!--            <div class="circle">-->
            <!--            </div>-->
            <div style="position: relative; width: 24px; height: 24px">
                <el-image :src="icon2"/>
                <div class="around" style="position: absolute; top: 8px; left: 8px"></div>
            </div>
            <div class="title">
                <div class="txt" v-text="titleName"></div>
            </div>
            <div class="decorate">
                <div class="parallelogram parallelogram-1"></div>
                <div class="parallelogram parallelogram-2"></div>
                <div class="parallelogram parallelogram-3"></div>
            </div>
        </div>
    </div>
</template>

<script>
// 实现模块标题装饰
import icon from '@/assets/images/ic_label.gif';
import icon2 from '@/assets/images/ic_label2.gif';

export default {
    components: {},
    props: {
        titleName: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            icon: icon,
            icon2: icon2
        }
    }
};
</script>
<style lang="scss" scoped>
.custom-title-box-border {
    width: 100%;
    height: 40px;
    padding: 6px 0;
    box-sizing: border-box;
    border-image: linear-gradient(
            90deg,
            #ffffff00 0%,
            #ffffff00 10%,
            #ffffff44 50%,
            #ffffff00 90%,
            #ffffff00 100%
    ) 9;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.custom-title-box {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(
            270deg,
            rgba(0, 85, 128, 0) 0%,
            rgba(33, 170, 255, 0.3) 51%,
            rgba(33, 170, 255, 0) 100%
    );

    .around {
        width: 8px;
        height: 8px;
        background: #00EFFE;
        box-shadow: 0 0 4px 0 #00EFFF;
        border-radius: 7px;
    }

    .circle {
        width: 24px;
        height: 24px;
        //box-shadow: -1px 2px 3px 0px rgba(0, 239, 254, 0.4) inset;
        //border-radius: 12px;
        //display: flex;
        //justify-content: center;
        //align-items: center;

        div {
            width: 8px;
            height: 8px;
            background: #00effe;
            box-shadow: 0px 0px 4px 0px #00efff;
            border-radius: 7px;
        }
    }

    .title {
        flex: 1;
        padding-left: 10px;
        display: flex;
        align-items: center;
        height: 100%;

        .txt {
            text-shadow: 0px 2px 6px rgba(0, 1, 1, 0.3);
            font-family: "lyndon";
            line-height: 22px;
            text-align: center;
            font-size: 20px;
            background-image: linear-gradient(
                    180deg,
                    #ffffff 0%,
                    #ffffff 20%,
                    #80d4ff 50%,
                    #ffffff 80%,
                    #f2fdff 100%
            );
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
    }

    .decorate {
        display: flex;

        .parallelogram {
            width: 10px;
            height: 11px;
            transform: skew(-30deg);
            -webkit-transform: skew(140deg);
            -moz-transform: skew(-30deg);
            -o-transform: skew(-30deg);
            -ms-transform: skew(-30deg);
            margin-right: 10px;
        }

        .parallelogram-1 {
            background-color: #00c9ff;
            opacity: 1;
        }

        .parallelogram-2 {
            background-color: #00c9ff;
            opacity: 0.6;
        }

        .parallelogram-3 {
            background-color: #00c9ff;
            opacity: 0.3;
        }
    }
}
</style>